<script setup>
import { ref, watchEffect } from 'vue'
import Cascader from '@/components/cascader/Cascader'
import { CScrollbar } from 'c-scrollbar'

const props = defineProps({
  treeList: {
    type: Array,
    default: []
  },
  kind: {
    type: Number,
    default: 1
  },
  curName: {
    type: String,
    default: ''
  },
  inboxed: {
    type: Boolean,
    default: false
  },
  preName: {
    type: String,
    default: ''
  }
})

const curName = ref('')
watchEffect(() => {
  curName.value = props.curName
})

const emits = defineEmits(['setValue'])

const setValue = (item) => {
  emits('setValue', item, props.kind)
}

const fstShow = ref(false)
const chdShow = ref(false)
const curTree = ref()
const children = ref([])
const togSel = () => {
  fstShow.value = !fstShow.value
  if(fstShow.value) {
    curTree.value = null
    children.value = []
  }
}

const showChild = (item) => {
  curTree.value = item
  if(item.children && item.children.length>0) {
    children.value = item.children
    chdShow.value = true
  } else {
    curTree.value = null
    children.value = []
    chdShow.value = false
  }
}
</script>

<template>
  <div :class="[inboxed ? 'ts-a' : '']">
    <input type="text" v-model="curName" :placeholder="'请选择'+preName" class="ipt" @focus="togSel()" @blur="togSel()" />
    <transition name="fade-mod" appear>
      <div class="ts-b" v-show="fstShow">
        <div class="ts-c">
          <c-scrollbar>
            <div class="ts-d" v-for="cur in treeList" :key="cur.selId" @click="setValue(cur)" @mouseover="showChild(cur)">{{cur.selName}}[{{cur.selCode}}]</div>
          </c-scrollbar>
        </div>
        <div v-if="children && children.length>0">
          <cascader :children="children" :showed="chdShow" :kind="1" @setValue="setValue" />
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.ts-a {width: 240px; position: relative;}
.ts-b {position: absolute; z-index: 4;}
.ts-c {min-width: 230px; height: 200px; overflow: hidden; background-color: #FFF; box-shadow: 0 2px 3px #999;}
.ts-d {height: 40px; line-height: 40px; padding: 0 20px; border-bottom: 1px solid #EEE; cursor: pointer;}
.ts-d:hover {background-color: #E9EEF2;}
</style>
